<template>
  <view class="preference" v-if="computedShowData">
    <view class="margin-box">
      <!-- <scroll-view scroll-y class="scroll-box"> -->
        <!-- 行程期待 -->
        <view class="scroll-item" v-if="computedShowData.themes.length > 0">
          <view class="pre-title">行程期待</view>
          <view class="pre-flex-box">
            <view
              class="flex-box-item omit1"
              :class="{ active: item.checked }"
              v-for="(item, index) in computedShowData.themes"
              :key="'themes' + index"
              @click="themesClick(index)"
              :data-spmCntSuffix="'ChatAiPage.preferenceCard@1.tag@'"
              :data-custom="index + 1"
              :data-spm="item"
            >
              {{ item.cardKey }}
            </view>
          </view>
        </view>
        <!-- 出行天数 -->
        <view
          class="scroll-item"
          v-if="computedShowData.totalDaysNumber.length > 0"
        >
          <view class="pre-title">出行天数</view>
          <view class="pre-flex-box">
            <view
              class="flex-box-item omit1"
              :class="{ active: item.checked }"
              v-for="(item, index) in computedShowData.totalDaysNumber"
              :key="'totalDaysNumber' + index"
              @click="totalDayClick(index)"
              :data-spmCntSuffix="'ChatAiPage.preferenceCard@2.tag@'"
              :data-custom="index + 1"
              :data-spm="item"
            >
              {{ item.cardKey }}
            </view>
          </view>
        </view>
        <!-- 想去的景点 -->
        <view class="scroll-item" v-if="computedShowData.wantToGo.length > 0">
          <view class="pre-title">想去的景点</view>
          <view class="pre-flex-box">
            <view
              class="flex-box-item bg omit1"
              :class="{ active: item.checked }"
              v-for="(item, index) in computedShowData.wantToGo"
              :key="'wantToGo' + index"
              @click="wantToGoClick(index)"
              :data-spmCntSuffix="'ChatAiPage.preferenceCard@3.tag@'"
              :data-custom="index + 1"
              :data-spm="item"
            >
              {{ item.cardKey }}
            </view>
          </view>
        </view>
        <!-- 人数 -->
        <view class="scroll-item" v-if="computedShowData.travellerNum">
          <view class="pre-title">出行人数</view>
          <view class="pre-flex-box-2">
            <view class="flex-input-box">
              <view class="input-lable">成人</view>
              <view class="input-controls">
                <view class="change-bth-box" 
                  @click="reduce(1)"
                  :data-spmCntSuffix="'ChatAiPage.preferenceCard@4.count@1'"
                  :data-custom="1"
                  :data-spm="1"
                >
                  <img
                    class="change-btn"
                    src=""
                  />
                </view>
                <view class="number">
                  {{ computedShowData.travellerNum.adult }}
                </view>
                <view class="change-bth-box" 
                  @click="add(1)"
                  :data-spmCntSuffix="'ChatAiPage.preferenceCard@4.count@2'"
                  :data-custom="1"
                  :data-spm="1"
                >
                  <img
                    class="change-btn"
                    src=""
                  />
                </view>
              </view>
            </view>
            <view class="flex-input-box">
              <view class="input-lable">儿童</view>
              <view class="input-controls">
                <view class="change-bth-box" 
                  @click="reduce(2)"
                  :data-spmCntSuffix="'ChatAiPage.preferenceCard@4.count@3'"
                  :data-custom="1"
                  :data-spm="1"
                >
                  <img
                    class="change-btn"
                    src=""
                  />
                </view>
                <view class="number">
                  {{ computedShowData.travellerNum.children }}
                </view>
                <view class="change-bth-box" 
                  @click="add(2)"
                  :data-spmCntSuffix="'ChatAiPage.preferenceCard@4.count@5'"
                  :data-custom="1"
                  :data-spm="1"
                >
                  <img
                    class="change-btn"
                    src=""
                  />
                </view>
              </view>
            </view>
            <view class="flex-input-box active">
              <view class="input-lable">老人</view>
              <view class="input-controls">
                <view class="change-bth-box" 
                  @click="reduce(3)"
                  :data-spmCntSuffix="'ChatAiPage.preferenceCard@4.count@6'"
                  :data-custom="1"
                  :data-spm="1"
                >
                  <img
                    class="change-btn"
                    src=""
                  />
                </view>
                <view class="number">
                  {{ computedShowData.travellerNum.elder }}
                </view>
                <view class="change-bth-box" 
                  @click="add(3)"
                  :data-spmCntSuffix="'ChatAiPage.preferenceCard@4.count@7'"
                  :data-custom="1"
                  :data-spm="1"
                >
                  <img
                    class="change-btn"
                    src=""
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      <!-- </scroll-view> -->
      <view
        class="sure-box"
        :class="{
          active: !clickable,
        }"
        @click="sureClick"
        :data-spmCntSuffix="'ChatAiPage.preferenceCard@5.confirm@'"
        :data-custom="1"
        :data-spm="1"
      >
        确认选择
      </view>
    </view>
  </view>
</template>

<script>
// const { getMessageCardInfo } = require("../../serve/index.js");
import {
  getMessageCardInfo
} from "../../serve";
export default {
  props: {
    showData: {
      type: Object,
    },
    clickable: {
      type: Boolean,
      default: false,
    },
    showRecord: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    // computedShowData: {
    //   get() {
    //     const newObj = this.showData?.card?.itineraryThemet;
    //     return newObj;
    //   },
    //   set() {},
    // },
  },
  data() {
    return {
      journeyTopics: [],
      totalDaysNumber: "",
      poiIds: [],
      computedShowData:null
    };
  },
  watch: {
    clickable: {
      immediate: true,
      handler: function (value, old) {
        if(value && value != old){ //如果可以操作，取传过来的值 否则不进行数据更新 防止用户点击确认后数据更新
          this.computedShowData = this.showData?.card?.itineraryTheme
        }else{
          
        }
        // this.computedShowData = this.showData?.card?.itineraryTheme
      },
    },
    showRecord:{//历史卡片显示偏好单独控制
      immediate: true,
      handler: function (value, old) {
        if(value){
          this.computedShowData = this.showData?.card?.itineraryTheme
        }
        
      },
    }
  },
  methods: {
    reduce(code) {
      if (!this.clickable) return;
      if (code == 1) {
        //修改成人
        let number = this.computedShowData.travellerNum.adult * 1;
        if (number <= 0) {
          return;
        }
        number--;
        this.computedShowData.travellerNum.adult = number;
      }
      if (code == 2) {
        //修改儿童
        let number = this.computedShowData.travellerNum.children * 1;
        if (number <= 0) {
          return;
        }
        number--;
        this.computedShowData.travellerNum.children = number;
      }
      if (code == 3) {
        //修改老人
        let number = this.computedShowData.travellerNum.elder * 1;
        if (number <= 0) {
          return;
        }
        number--;
        this.computedShowData.travellerNum.elder = number;
      }
      this.$forceUpdate();
    },
    add(code) {
      if (!this.clickable) return;
      if (code == 1) {
        //修改成人
        let number = this.computedShowData.travellerNum.adult * 1;
        if (number > 9) {
          uni.showToast({
            title: "最多添加十人~",
            icon: "none",
          });
          return;
        }
        number++;
        this.computedShowData.travellerNum.adult = number;
      }
      if (code == 2) {
        //修改儿童
        let number = this.computedShowData.travellerNum.children * 1;
        if (number > 9) {
          uni.showToast({
            title: "最多添加十人~",
            icon: "none",
          });
          return;
        }
        number++;
        this.computedShowData.travellerNum.children = number;
      }
      if (code == 3) {
        //修改老人
        let number = this.computedShowData.travellerNum.elder * 1;
        if (number > 9) {
          uni.showToast({
            title: "最多添加十人~",
            icon: "none",
          });
          return;
        }
        number++;
        this.computedShowData.travellerNum.elder = number;
      }
      this.$forceUpdate();
    },
    async themesClick(index) {

      if(this.clickable) {
        let obj = this.computedShowData;
        obj.themes[index].checked = !obj.themes[index].checked;
        let arr = [];
        for (var i = 0; i < obj.themes.length; i++) {
          if (i == index) {
            if (obj.themes[i].checked) {
              arr.push(obj.themes[i].cardKey);
            }
          } else {
            obj.themes[i].checked = false;
          }
        }

        // if (this.computedShowData?.travellerNum) {
        //   if (arr.includes("亲子")) {
        //     if (this.computedShowData.travellerNum.children <= 0) {
        //       this.computedShowData.travellerNum.children = 1;
        //     }
        //   } else {
        //     this.computedShowData.travellerNum.children = 0;
        //   }
        // }
      } 

      this.changeUpdate()
      console.log('期待行程改变', this.computedShowData,this.showData)
      this.$forceUpdate();
    },
    async changeUpdate(){
      let cardData = await getMessageCardInfo({
        destId: this.showData.destId,
        travellerNum: this.computedShowData.travellerNum,
        day:  this.computedShowData.totalDaysNumber.filter(item=>item.checked)[0]?.cardValue || '',
        tag: this.computedShowData?.themes.filter(item=>item.checked)[0]?.cardValue || '',
        poiIds:  this.computedShowData?.wantToGo.filter(item=>item.checked).map(i=>i.cardValue)
      })

      this.$set(this, 'computedShowData', {
        ...this.computedShowData,
        wantToGo:cardData.data.wantToGo,
        travellerNum:cardData.data.travellerNum})
      let _compdata =  this.computedShowData
      this.computedShowData = {}
      this.computedShowData = _compdata
   
    },
    totalDayClick(index) {
      if(this.clickable) {
        let arr = this.computedShowData.totalDaysNumber;
        for (var i = 0; i < arr.length; i++) {
          arr[i].checked = false;
          if (i == index) {
            arr[i].checked = true;
          }
        }
      }
   
      this.changeUpdate()
      this.$forceUpdate();
    },
    wantToGoClick(index) {
      if (!this.clickable) return;
      let arr = this.computedShowData.wantToGo;
      for (var i = 0; i < arr.length; i++) {
        if (i == index) {
          arr[i].checked = !arr[i].checked;
        }
      }
      this.$forceUpdate();
    },
    verifFun() {
      let themesArr = this.computedShowData?.themes;
      let totalDaysNumberArr = this.computedShowData?.totalDaysNumber;
      let travellerNum = this.computedShowData?.travellerNum;
      let wantToGoArr = this.computedShowData?.wantToGo;
      let code_1 = this.computedShowData.hasOwnProperty("themes")
          ? false
          : true,
        code_2 = this.computedShowData.hasOwnProperty("totalDaysNumber")
          ? false
          : true,
        code_3 = this.computedShowData.hasOwnProperty("travellerNum")
          ? false
          : true,
        code_4 = this.computedShowData.hasOwnProperty("wantToGo")
          ? false
          : true;
      for (var i = 0; i < themesArr.length; i++) {
        if (themesArr[i].checked) {
          code_1 = true;
          break;
        }
      }
      for (var i = 0; i < totalDaysNumberArr.length; i++) {
        if (totalDaysNumberArr[i].checked) {
          code_2 = true;
          break;
        }
      }
      if (travellerNum) {
        if (
          travellerNum?.adult > 0 ||
          travellerNum?.children > 0 ||
          travellerNum?.elder > 0
        ) {
          code_3 = true;
        }
      }
      for (var i = 0; i < wantToGoArr.length; i++) {
        if (wantToGoArr[i].checked) {
          code_4 = true;
          break;
        }
      }
      return code_1 || code_2 || code_3 || code_4;
    },
    sureClick() {
      if (!this.clickable) return;
      if (!this.verifFun) {
        uni.showToast({
          title: "请填写出行信息",
          icon: "none",
        });
      } else {
        let arr = this.computedShowData?.wantToGo
          ? this.computedShowData?.wantToGo
          : [];
        let dateArr = this.computedShowData?.totalDaysNumber
          ? this.computedShowData?.totalDaysNumber
          : [];
        let themesArr = this.computedShowData?.themes
          ? this.computedShowData?.themes
          : [];
        let choseArr = [];
        let totalDaysNumber = ""; //出行天数
        let wantInfoList = []; //想去景点
        let journeyTopics = []; //行程偏好
        //行程偏好
        for (var i = 0; i < themesArr.length; i++) {
          if (themesArr[i].checked) {
            journeyTopics.push(themesArr[i].cardKey);
          }
        }
        //想去景点数据
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].checked) {
            choseArr.push(arr[i]);
            wantInfoList.push({
              poiId: arr[i].cardValue,
              poiName: arr[i].cardKey,
            });
          }
        }
        //天数
        for (var i = 0; i < dateArr.length; i++) {
          if (dateArr[i].checked) {
            totalDaysNumber = dateArr[i].cardValue;
          }
        }
        let params = {
          fixedSceneCode: 30, // 根据刘旭要求写死为30
          journeyTopics,
          travellerNum: this.computedShowData.travellerNum,
          totalDaysNumber,
          poiList: choseArr,
          wantInfoList,
        };
        console.log("params", params);
        this.$emit("sureClick", params);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.preference {
  position: relative;
  .scroll-mask {
    position: absolute;
    width: 100%;
    height: 52rpx;
    bottom: 90rpx;
    z-index: 3;
  }
  .margin-box {
    padding: 0 2.8%;
    // .scroll-box {
    //   max-height: 936rpx;
    // }

    .pre-title {
      font-size: 28rpx;
      color: $sl-color-black;
      line-height: 40rpx;
      font-weight: 600;
      padding: 10rpx 0 20rpx 4.5rpx;
    }
    .pre-flex-box {
      display: flex;
      flex-wrap: wrap;
      .flex-box-item {
        width: 24%;
        height: 58rpx;
        background: #ffffff;
        border-radius: 29rpx;
        margin-bottom: 12rpx;
        color: $sl-color-black;
        font-size: 24rpx;
        line-height: 58rpx;
        text-align: center;
        padding: 0 19rpx;
        box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.06);
        &.bg {
          width: 40%;
        }
        &.bg:not(:nth-child(3n-2)) {
          margin-left: unset;
        }
        &.bg:nth-child(2n-1) {
          margin: 0 2%;
        }
      }
      .flex-box-item.active {
        font-weight: 600;
        background: rgba(27, 156, 97, 0.20);
      }
      .flex-box-item:not(:nth-child(3n-2)) {
        margin-left: 1.3%;
      }
    }
    .pre-flex-box-2 {
      // width: 454rpx;
      background: #ffffff;
      border-radius: 26rpx;
      margin: 0 auto;
      box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.06);
      .flex-input-box.active {
        border: none;
      }
      .flex-input-box {
        height: 88rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24rpx;
        .input-lable {
          color: #3E3F6E;
          font-size: 24rpx;
          height: 100%;
          display: flex;
          align-items: center;
        }
        .input-controls {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height: 100%;
          .change-bth-box {
            height: 88rpx;
            width: 44rpx;
            display: flex;
            align-items: center;
            .change-btn {
              width: 44rpx;
              height: 44rpx;
            }
          }

          .number {
            width: 73rpx;
            text-align: center;
            font-size: 32rpx;
            color: $sl-color-black;
          }
        }
      }
    }
    .sure-box {
      width: 100%;
      height: 80rpx;
      border-radius: 26rpx;
      background: rgba(27, 156, 97, 1);
      line-height: 80rpx;
      text-align: center;
      color: #FFFFFF;
      font-size: 28rpx;
      margin: 24rpx auto 0 auto;
      &.active {
        background: #E4E4F4;
        color: #B5B5D2;
      }
    }
  }
}
</style>
